<script setup>
import { ref } from "vue";
import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
const route = useRoute();
const router = useRouter();
const path = ref(route.path.split("/")[route.path.split("/").length - 1]);
console.log(path.value);
onBeforeRouteUpdate(async (to, from) => {
  path.value = to.path.split("/")[to.path.split("/").length - 1];
});

const closePage = () => {
  window.opener = null;
  window.open("about:blank", "_top").close();
};


// console.log(route);
</script>

<template>
  <div class="login-box">
    <header class="login-header">
      <div></div>
      <div>欢迎登录</div>
      <div v-if="path == 'login' || path == 'success'">
        <router-link to="/">进入网站首页</router-link>
      </div>
      <div v-if="path == 'forget'">
        <router-link to="/registeredAndLogin/login" >返回登录</router-link>
      </div>
      <div v-if="path == 'registered'">
        <router-link to="/registeredAndLogin/login"
          ><p style="color: #ddd">
            已有帐号,<span style="color: #1abc9c">立即登录</span>
          </p></router-link
        >
      </div>
      <div v-if="path == 'terms'">
        <span @click="closePage" style="color: #1abc9c">关闭本页</span>
      </div>
    </header>
    <router-view></router-view>
    <div class="footer">
      <div class="login-footer">
        <span>关于我们</span>
        <span>帮助中心</span>
        <span>售后服务</span>
        <span>配送与验收</span>
        <span>商务合作</span>
        <span>搜索推荐</span>
        <span>友情链接</span>
      </div>
      <div>CopyRight © 小兔鲜儿</div>
    </div>
  </div>
</template>

<style lang="scss">
.login-box {
  header {
    width: 100%;
    height: 133px;
    display: flex;
    justify-content: center;
    background-color: #fff;
    div:nth-of-type(1) {
      width: 250px;
      height: 100%;
      background-image: url("@/assets/logo.0940ebb5.png");
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: center;
    }
    div:nth-of-type(2) {
      width: 60%;
      height: 100%;
      font-size: 24px;
      line-height: 190px;
      padding-left: 30px;
    }
    div:nth-of-type(3) {
      height: 100%;
      font-size: 16px;
      line-height: 190px;
      vertical-align: bottom;
      a {
        color: #1abc9c;
      }
    }
  }

  .footer {
    margin: 20px;
    div {
      text-align: center;
      font-size: 14px;
      color: #999;

      span {
        cursor: pointer;
        position: relative;
        margin: 10px 10px;
        & ~ span::after {
          position: absolute;
          content: "";
          width: 1px;
          height: 14px;
          top: 1px;
          left: -10px;
          border-left: 1px solid #999;
        }

        &:hover {
          color: dodgerblue;
        }
      }
    }
  }
}
</style>
